﻿<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<#--<link href="https://cdn.bootcss.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet">-->
    <link rel="stylesheet" href="../static/css/pagination.css">
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">
    <link rel="stylesheet" href="../static/css/reset.css">
    <link rel="stylesheet" href="../static/css/client.css">
    <title>容智车联车厢管家</title>
    <style>
        .bot-dot .cursor-p {
            width: 100%;
            display: block;
        }
    </style>
</head>
<body>
<div class="container-fluid  pos-re">
    <!--右边内容区-->
    <div class="row-fluid bg-white  pad-10 bdbox height100 yaxh">
        <div class="p-b-10 ov-h">
            <form class="navbar-search pull-left" method="post" action="../user/chooseClient">
                <input type="text" class="search-query" placeholder="输入搜索信息" name="word" value="${word}"/>
                <button class="search-lence" type="Submit"></button>
            </form>
            <div class="pull-right offset4">
                <button class="btn bg-color leftBtn" name="addClient" id="add_info">增加</button>
                <a class="btn bg-color" data-toggle="modal"  href="../user/clientExout?word=${word}" download="facility.xls">导出</a>
            </div>
        </div>
        <!--以上是搜索框，增加按钮组-->
        <!--以下是内容表格区-->
        <table class="table  cl-b table-btn">
            <thead class="four-border">
            <tr>
                <th width="8%">序号</th>
                <th width="10%">客户名称</th>
                <th width="10%">法人代表</th>
                <th width="10%">手机号码</th>
                <th width="16%">邮箱地址</th>
                <th width="10%">座机号码</th>
                <th width="10%">营业执照</th>
                <th width="10%">客服经理</th>
                <th width="16%">操作</th>
            </tr>
            </thead>
            <tbody class="m-t-10 t-c" id="f-table">
            <#list clientList as user>
            <tr class="${user.id}">
                <td class="t-c port-num">
                    <span class="txt-limit1" title="${user.id!""}">${user_index+1+((currentPage-1)*size)}</span>
                </td>
                <td class="port-name">
                    <span class="txt-limit1" title="${user.name!""}">${user.name!""}</span>
                </td>
                <td class="port-owner">
                    <span class="txt-limit1" title="${user.legalPerson!""}">${user.legalPerson!""}</span>
                </td>
                <td class="port-coords">
                    <span class="txt-limit1" title="${user.mobile!""}">${user.mobile!""}</span>
                </td>
                <td class="port-email">
                    <span class="txt-limit1" title="${user.email!""}"><span class="txt-limit"
                                                                            title="${user.email!""}">${user.email!""}</span>
                </td>
                <td class="port-call">
                    <span class="txt-limit1" title="${user.tel!""}">${user.tel!""}</span>
                </td>
                </td>
                <td class="port-licenseUrl">
                    <span class="txt-limit1" title="${user.licenseUrl!""}" id="${user.licenseUrl!""}"><a href="${user.licenseUrl!""}" target="blank">查看</a></span>
                <td class="port-client">
                    <span class="port-client" title="${user.serverManager!""}">${user.serverManager!""}</span>
                </td>
                <td>
                    <button class="btn bg-color rewrite leftBtn">修改</button>
                    <button class="btn bg-color2 rightBtn" data-toggle="modal" data-target="#myModal">删除</button>
                </td>
            </tr>
            </#list>
            </tbody>
        </table>
        <div class="M-box"></div>
    <#--静态分页-->
    <#--<div class="col-md-12 column">-->
    <#--<ul class="pagination pull-right">-->
    <#--<ul class="pagination">-->
    <#--<li class="disabled">-->
    <#--<a href="#">上一页</a>-->
    <#--</li>-->
    <#--<li class="disabled">-->
    <#--<a href="#">1</a>-->
    <#--</li>-->
    <#--<li class="disabled">-->
    <#--<a href="#">下一页</a>-->
    <#--</li>-->
    <#--</ul>-->
    <#--</div>-->
    <#--动态分页-->
        <div class="col-md-12 column">
            <ul class="pagination pull-right">
                <ul class="pagination">
                <#if currentPage lte 1>
                    <li class="disabled"><a href="#">上一页</a></li>
                <#elseif type == "1">
                    <li><a href="../user/getClient?page=${currentPage - 1}&size=${size}">上一页</a></li>
                <#elseif type == "2">
                    <li><a href="../user/chooseClient?page=${currentPage - 1}&size=${size}&word=${word}">上一页</a></li>
                </#if>
                <#if  maxSize gte 10>
                    <#if currentPage gte 6 && currentPage lte maxSize-4>
                        <#list currentPage-5.. currentPage+4 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../user/getClient?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../user/chooseClient?page=${index}&size=${size}&word=${word}">${index}</a>
                                </li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    <#elseif currentPage lte 6>
                        <#list 1..10 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../user/getClient?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../user/chooseClient?page=${index}&size=${size}&word=${word}">${index}</a>
                                </li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    <#elseif currentPage gte maxSize-4>
                        <#list maxSize-10.. maxSize as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../user/getClient?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../user/chooseClient?page=${index}&size=${size}&word=${word}">${index}</a>
                                </li>
                            </#if>
                        </#list>
                    <#elseif currentPage lte maxSize-4>
                        <#list currentPage-10.. maxSize as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../user/getClient?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../user/chooseClient?page=${index}&size=${size}&word=${word}">${index}</a>
                                </li>
                            </#if>
                        </#list>
                    <#else >
                        <#list currentPage.. 10 as index>
                            <#if currentPage == index>
                                <li class="disabled"><a href="#">${index}</a></li>
                            <#elseif type == "1">
                                <li><a href="../user/getClient?page=${index}&size=${size}">${index}</a></li>
                            <#elseif type == "2">
                                <li><a href="../user/chooseClient?page=${index}&size=${size}&word=${word}">${index}</a>
                                </li>
                            </#if>
                        </#list>
                        <li class="disabled"><a>...</a></li>
                    </#if>
                <#else >
                    <#list 1..maxSize as index>
                        <#if currentPage == index>
                            <li class="disabled"><a href="#">${index}</a></li>
                        <#elseif type == "1">
                            <li><a href="../user/getClient?page=${index}&size=${size}">${index}</a></li>
                        <#elseif type == "2">
                            <li><a href="../user/chooseClient?page=${index}&size=${size}&word=${word}">${index}</a></li>
                        </#if>
                    </#list>
                </#if>
                <#if currentPage gte maxSize>
                    <li class="disabled"><a href="#">下一页</a></li>
                <#elseif type == "1">
                    <li><a href="../user/getClient?page=${currentPage + 1}&size=${size}">下一页</a></li>
                <#elseif type == "2">
                    <li><a href="../user/chooseClient?page=${currentPage + 1}&size=${size}&word=${word}">下一页</a></a>
                    </li>
                </#if>
                </ul>
            </ul>
        </div>
        <!--以下是信息修改/新建信息弹出页面-->
        <div class="pos-ab wh-bfb pad-30 bdbox dis-no height100 a-scroll" id="pop_info">
            <input type="hidden" id="clientId">
            <div class="container w-lim pad-10 ov-h bdbox">
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">客&nbsp;&nbsp;&nbsp;户&nbsp;&nbsp;名&nbsp;&nbsp;称:</div>
                    <div class="span2">
                        <input type="text" placeholder="输入客户名称" class="name-input"/></div>
                </div>

                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">营&nbsp;&nbsp;&nbsp;业&nbsp;&nbsp;执&nbsp;&nbsp;照:</div>
                    <div class="span8 p-b-10">
                        <form id="uploadForm" class="from-lj">

                            <div class="scimg  float-l width50">
                                <img id="ImgPr" width="120" height="120"/>
                            </div>
                            <div class="float-r width50">
                                <div class="float-l emit-pic  pos-re text-center  btn bg-color margin-b15">
                                    上传执照
                                    <!--<input type="file" class="carpic-input pos-ab cursor-p" name="fileName"/>-->

                                    <input class="carpic-input pos-ab cursor-p" type="file" id="up" name="fileName"/>
                                </div>
                                <div class="float-l emit-pic  pos-re text-center  btn bg-color">
                                    确认上传
                                    <input class="carpic-input pos-ab cursor-p" type="button" id=""
                                           onclick="doUpload()"/>
                                </div>
                            </div>


                        </form>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">法&nbsp;&nbsp;&nbsp;人&nbsp;&nbsp;代&nbsp;&nbsp;表:</div>
                    <div class="span2">
                        <input type="text" placeholder="输入法人代表名称" class="owner-input"/>
                    </div>
                </div>
                <div class="row-fluid p-bt-10 bot-dot">
                    <div class="span3 text-right offset1">公&nbsp;&nbsp;&nbsp;司&nbsp;&nbsp;地&nbsp;&nbsp;址:</div>
                    <div class="span2">
                        <input type="text" placeholder="输入公司地址（至街道）" class="coords-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">公&nbsp;&nbsp;&nbsp;司&nbsp;&nbsp;电&nbsp;&nbsp;话:</div>
                    <div class="span2">
                        <input type="text" placeholder="例：010-111111" class="call-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">联&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;人:</div>
                    <div class="span2">
                        <input type="text" placeholder="输入联系人姓名" class="person-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">手&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;号&nbsp;&nbsp;码:</div>
                    <div class="span2">
                        <input type="tel" placeholder="输入11位手机号" class="tel-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">邮&nbsp;&nbsp;&nbsp;箱&nbsp;&nbsp;地&nbsp;&nbsp;址:</div>
                    <div class="span2">
                        <input type="text" placeholder="例：lilang@126.com" class="email-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">座&nbsp;&nbsp;&nbsp;机&nbsp;&nbsp;号&nbsp;&nbsp;码:</div>
                    <div class="span2">
                        <input type="text" placeholder="例：010-111111" class="zuoji-input"/>
                    </div>
                </div>
                <div class="row-fluid p-t-10 bot-dot">
                    <div class="span3 text-right offset1">客&nbsp;&nbsp;&nbsp;服&nbsp;&nbsp;经&nbsp;&nbsp;理:</div>
                    <div class="span2">
                        <input type="text" placeholder="输入经理名称" class="client-input"/>
                    </div>
                </div>
            </div>
            <!--以下按钮组用于修改信息用-->
        <#--<div class="row-fluid p-t-30 dis-no p-l-48" id="txt_add">
            <button class="btn span2 bg-color offset3" id="updateClientUser">确定</button>
            <button class="btn span2 bg-color2 offset1">返回</button>
        </div>
        <!--以下按钮组用于新建信息用&ndash;&gt;
        <div class="row-fluid p-t-30 dis-no p-l-48" id="new_add">
            <button class="btn span2 bg-color offset3 leftBtn" id="addClientUser">确定</button>
            <button class="btn span2 bg-color2 offset1 rightBtn">返回</button>
        </div>-->

            <div class="w-lim2 pad-10 ov-h bdbox">
                <!--以下按钮组用于修改信息用-->
                <div class="row-fluid p-t-30 dis-no" id="txt_add">
                    <button class="btn span5 bg-color pull-left leftBtn" id="updateClient">确定</button>
                    <button class="btn span5 bg-color2 pull-right rightBtn">返回</button>
                </div>
                <!--以下按钮组用于新建信息用-->
                <div class="row-fluid p-t-30 dis-no" id="new_add">
                    <button class="btn span5 bg-color pull-left leftBtn" id="addClientUser">确定</button>
                    <button class="btn span5 bg-color2 pull-right rightBtn">返回</button>
                </div>
            </div>

        </div>
    </div>
</div>
</div>
<!-- 点击删除按钮时弹出的模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"
     style="width:350px;margin-left:-175px">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header bg-color">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
                <p class="modal-title text-center ">
                    提示消息
                </p>
            </div>
            <div class="modal-body text-center">
                是否确认删除?
            </div>
            <div class="modal-footer text-center">
                <button type="button" class="btn bg-color span2" data-dismiss="modal">取消
                </button>
                <button type="button" class="btn bg-color2 span2" id="deleteClient">
                    删除
                </button>
            </div>
        </div>
    </div>
</div>

<script src="../static/js/jquery.min.js"></script>
<script src="../static/js/bootstrap.min.js"></script>
<script src="../static/js/client.js"></script>
<script src="../static/js/user/userClient.js"></script>
<script src="../static/js/jquery.pagination.js"></script>
<#--<script>-->
<#--$('.M-box').pagination({-->
<#--pageCount:50,-->
<#--jump:true,-->
<#--coping:true,-->
<#--homePage:'首页',-->
<#--endPage:'末页',-->
<#--callback:function(api){-->
<#--$('.now').text(api.getCurrent());-->
<#--}-->
<#--},function(api){-->
<#--$('.now').text(api.getCurrent());-->
<#--});-->

<#--</script>-->
<script type="text/javascript">
    $(function () {
        $("#up").uploadPreview({Img: "ImgPr", Width: 120, Height: 120});
    });
    jQuery.fn.extend({
        uploadPreview: function (opts) {
            var _self = this,
                    _this = $(this);
            opts = jQuery.extend({
                Img: "ImgPr",
                Width: 100,
                Height: 100,
                ImgType: ["gif", "jpeg", "jpg", "bmp", "png"],
                Callback: function () {
                }
            }, opts || {});
            _self.getObjectURL = function (file) {
                var url = null;
                if (window.createObjectURL != undefined) {
                    url = window.createObjectURL(file)
                } else if (window.URL != undefined) {
                    url = window.URL.createObjectURL(file)
                } else if (window.webkitURL != undefined) {
                    url = window.webkitURL.createObjectURL(file)
                }
                return url
            };
            _this.change(function () {
                if (this.value) {
                    if (!RegExp("\.(" + opts.ImgType.join("|") + ")$", "i").test(this.value.toLowerCase())) {
                        alert("选择文件错误,图片类型必须是" + opts.ImgType.join("，") + "中的一种");
                        this.value = "";
                        return false
                    }
                    if ($.browser.msie) {
                        try {
                            $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                        } catch (e) {
                            var src = "";
                            var obj = $("#" + opts.Img);
                            var div = obj.parent("div")[0];
                            _self.select();
                            if (top != self) {
                                window.parent.document.body.focus()
                            } else {
                                _self.blur()
                            }
                            src = document.selection.createRange().text;
                            document.selection.empty();
                            obj.hide();
                            obj.parent("div").css({
                                'filter': 'progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)',
                                'width': opts.Width + 'px',
                                'height': opts.Height + 'px'
                            });
                            div.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = src
                        }
                    } else {
                        $("#" + opts.Img).attr('src', _self.getObjectURL(this.files[0]))
                    }
                    opts.Callback()
                }
            })
        }
    });
</script>
</body>
</html>
